<template>
  <el-dialog :title="form.id ? $t('btn.edit') : $t('operation.add')" v-model="visible"
             :close-on-click-modal="false" draggable>
    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="150px" v-loading="loading">
      <el-row :gutter="24">
        <el-col :span="12" class="mb20">
          <el-form-item :label="$t('qms.operationScreen')" prop="operationPicture">
            <el-input v-model="form.operationPicture" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item :label="$t('pda.operatingTime')" prop="operationTime">
            <el-input v-model="form.operationTime" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item :label="$t('pad.operator')" prop="operationUserNo">
            <el-input v-model="form.operationUserNo" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item :label="$t('iot.operationType')" prop="operationType">
            <el-input v-model="form.operationType" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item :label="$t('pad.module')" prop="module">
            <el-input v-model="form.module"/>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item :label="$t('pda.source')" prop="source">
            <el-input v-model="form.source" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item :label="$t('iot.startTime')" prop="requestStartTime">
            <el-input v-model="form.requestStartTime" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item :label="$t('iot.endTime')" prop="requestEndTime">
            <el-input v-model="form.requestEndTime" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item :label="$t('pad.isY')" prop="isPass">
            <el-input v-model="form.isPass" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item :label="$t('pad.responseCode')" prop="responseCode">
            <el-input v-model="form.responseCode" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
            <el-form-item :label="$t('pda.errorMessage')" prop="errorMessage">
            <el-input v-model="form.errorMessage" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item :label="$t('qms.creationTime')" prop="creationTime">
            <el-input v-model="form.creationTime" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label=" createUserNo" prop="createUserNo">
            <el-input v-model="form.createUserNo" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label=" createUserName" prop="createUserName">
            <el-input v-model="form.createUserName" />
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item :label="$t('pad.callingInterface')" prop="callInterface">
            <el-input v-model="form.callInterface" />
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item :label="$t('pad.incomingParameter')" prop="inputParameter">
            <VueJsonPretty :data="form.inputParameter" />
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item :label="$t('qms.returnParameter')" prop="returnParameter">
            <VueJsonPretty :data="form.returnParameter" />
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">{{$t('qms.close')}}</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="BasOperationLogDialog">
import {useMessage} from "/@/hooks/message";
import {getObj, addObj, putObj} from '/@/api/platform/digital/basOperationLog'
const emit = defineEmits(['refresh']);
import  VueJsonPretty  from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
// 定义字典


// 提交表单数据
const form = reactive({
  id: '',
  operationPicture: '',
  operationTime: '',
  operationUserNo: '',
  operationType: '',
  inputParameter: '',
  returnParameter: '',
  callInterface: '',
  module: '',
  source: '',
  requestStartTime: '',
  requestEndTime: '',
  isPass: '',
  responseCode: '',
  errorMessage: '',
  creationTime: '',
  createUserNo: '',
  createUserName: '',
  lastModifyTime: '',
  lastModifyUserName: '',
  lastModifyUserNo: '',
  attribute1: '',
  attribute2: '',
  attribute3: '',
});

// 定义校验规则
const dataRules = ref({})

// 打开弹窗
const openDialog = (id: string) => {
  visible.value = true
  form.id = ''

  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

  // 获取basOperationLog信息
  if (id) {
    form.id = id
    getbasOperationLogData(id)
  }
};



// 初始化表单数据
const getbasOperationLogData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj(id).then((res: any) => {
    res.data.inputParameter = JSON.parse(res.data.inputParameter)
    res.data.returnParameter = JSON.parse(res.data.returnParameter)
    Object.assign(form, res.data)
  }).finally(() => {
    loading.value = false
  })
};

// 暴露变量
defineExpose({
  openDialog
});
</script>